<template>
  <div>
    <head-cropper ref="c1" class="cropper" src="/static/img.jpg" :is-arc="false"></head-cropper>
    <head-cropper ref="c2" class="cropper" src="/static/img.jpg"></head-cropper>
    <button @click="toUrl">获得 URL</button>
    <button @click="toBlob">获得 Blob</button>
  </div>
</template>

<script>
  import HeadCropper from "@/components/HeadCropper"

  export default {
    name: 'HelloWorld',
    components: {
      "head-cropper": HeadCropper
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      toUrl() {
        var url = this.$refs.c1.toDataURL("image/png")
      },
      toBlob() {
        this.$refs.c2.toBlob(blob => {

        },"image/png")
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .cropper {
    width: 100%;
    height: 400Px;
  }
</style>
